<template>
	<view class="search">
		<view class="position">
			<view class="search-box">
				<uni-icons type="back" size="24" color="#8a8a8a" @tap="$Router.back()"></uni-icons>
				<view class="box">
					<image class="img" src="../../static/img/search.png" mode=""></image>
					<input class="ipt-t" type="text" v-model="iptValue" placeholder="搜索你关注的内容" placeholder-class="ipt-c">
				</view>
				<view class="search-btn" @tap="searchClick">
					搜索
				</view>
			</view>
		</view>
		<view class="line-content">

		</view>
		<view class="search-result" v-if="isResult">
			<view class="tab-cart">
				<view class="cart-item" v-for="(item,i) in tabList" :key="i" @tap="itemTap(item)">
					<view :class="['title', isActive === item.type ? 'color' : '']">{{item.name}}</view>
					<image class="img" v-if="isActive == item.type" src="../../static/img/active.png" mode=""></image>
					<image class="img" v-else src="../../static/img/active-img.png" mode=""></image>
				</view>
			</view>
			<view class="result" v-if="isActive === 'composite'">
				<t-big-cart :bigCartList="bigCartList"></t-big-cart>
			</view>
			<view class="result" v-if="isActive === 'new'">
				<t-big-cart :bigCartList="bigCartList"></t-big-cart>
			</view>
			<view class="result" v-if="isActive === 'price'">
				<t-big-cart :bigCartList="bigCartList"></t-big-cart>
			</view>
			<view class="result" v-if="isActive === 'sales'">
				<t-big-cart :bigCartList="bigCartList"></t-big-cart>
			</view>
			<view class="result_" v-if="isActive === 'filter'">
				<view class="item-size">
					<view class="size-title">类型</view>
					<view class="options">
						<view :class="['opt-item', optIsActive == i1 ? 'active':'']"
							v-for="(item1,i1) in sizeList[0].children" :key="i1" @tap="optActive(i1)">
							{{item1.name}}
						</view>
					</view>
					<view class="size-title">类型</view>
					<view class="options">
						<view :class="['opt-item', optIsActive_ == i1 ? 'active':'']"
							v-for="(item1,i1) in sizeList[1].children" :key="i1" @tap="optActive_(i1)">
							{{item1.name}}
						</view>
					</view>
					<view class="size-title">价格区间</view>
					<view class="options__">
						<view class="lowest">
							<input class="ipt" type="text" placeholder="最低价" placeholder-class="ipt-in">
						</view>
						<view class="line"></view>
						<view class="highest">
							<input class="ipt" type="text" placeholder="最高价" placeholder-class="ipt-in">
						</view>
					</view>
					<view class="reset-confirm">
						<view class="reset">重置选择</view>
						<view class="confirm">确认选择</view>
					</view>
				</view>
			</view>
		</view>
		<view class="menu-search" v-if="isMenu">
			<view class="one">
				<view class="title_">
					<view class="left">搜索历史</view>
					<view class="right">清除</view>
				</view>
				<view class="history">
					<view class="item" v-for="(item,i) in historyList" :key="i">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="one">
				<view class="title_">
					<view class="left">热门搜索</view>
				</view>
				<view class="history">
					<view class="item" v-for="(item,i) in hotSearchList" :key="i">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bigCartList: [{
						name: '牛仔裙',
						price: 699.00,
						goods_ok: 9,
						goods_img: '../../static/img/big_1.png'
					},
					{
						name: '连衣裙',
						price: 699.00,
						goods_ok: 9,
						goods_img: '../../static/img/big_2.png'
					},
					{
						name: '新款毛衣',
						price: 699.00,
						goods_ok: 9,
						goods_img: '../../static/img/big_4.png'
					},
					{
						name: '新款毛衣',
						price: 699.00,
						goods_ok: 9,
						goods_img: '../../static/img/big_4.png'
					},
				],
				iptValue: '',
				isResult: false,
				isActive: 'composite',
				tabList: [{
						type: 'composite',
						name: '综合',
					},
					{
						type: 'new',
						name: '最新',
					},
					{
						type: 'price',
						name: '价格',
					},
					{
						type: 'sales',
						name: '销量',
					},
					{
						type: 'filter',
						name: '筛选',
					}
				],
				sizeList: [{
						name: '类型Ⅰ',
						children: [{
								name: '全部'
							}, {
								name: '类型分类',
							},
							{
								name: '类型分类'
							},
							{
								name: '类型分类'
							}
						]
					},
					{
						name: '类型ⅠⅠ',
						children: [{
								name: '全部'
							}, {
								name: '类型分类',
							},
							{
								name: '类型分类'
							},
							{
								name: '类型分类',
							},
							{
								name: '类型分类'
							},
							{
								name: '类型分类',
							}
						]
					}
				],
				optIsActive: 0,
				optIsActive_: 0,
				pageType: '',
				isMenu: false,
				historyList: [{
						name: '连衣裙'
					},
					{
						name: '外套'
					}
				],
				hotSearchList: [{
						name: '连衣裙'
					},
					{
						name: '外套'
					},
					{
						name: '短裤'
					},
					{
						name: '裙子'
					},
					{
						name: '裤子'
					},
					{
						name: '防晒'
					},
					{
						name: '短袖'
					},
					{
						name: '半身裙'
					}
				]
			};
		},
		onLoad() {
			this.pageType = this.$Route.query.type
			if (this.pageType) {
				this.isMenu = true
			}
		},
		methods: {
			searchClick() {
				if (this.iptValue) {
					this.isResult = !this.isResult
				}
			},
			itemTap(item) {
				this.isActive = item.type
			},
			optActive(i) {
				this.optIsActive = i
			},
			optActive_(i) {
				this.optIsActive_ = i
			}
		}
	}
</script>

<style lang="scss">
	.search {
		.position {
			position: relative;
			width: 100%;
			height: 137rpx;
			background-color: #fff;

			.search-box {
				border-radius: 30rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				align-items: center;
				margin: 0 18rpx;
				width: 100%;

				.box {
					display: flex;
					align-items: center;
					width: 70%;
					height: 60rpx;
					border-radius: 30rpx;
					padding: 16rpx 0 16rpx 35rpx;
					box-sizing: border-box;
					margin-right: 17rpx;
					background-color: #f5f5f5;

					.img {
						width: 25rpx;
						height: 28rpx;
						margin-right: 16rpx;
					}
					.ipt-t {
						font-size: 28rpx;
						color: #333;
					}
					.ipt-c {
						font-family: SourceHanSansCN-Regular;
						font-size: 28rpx;
						line-height: 36rpx;
						letter-spacing: 3rpx;
						color: #c0c0c0;
					}


				}

				.search-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 118rpx;
					height: 52rpx;
					background-color: #c60122;
					border-radius: 21rpx;
					font-size: 28rpx;
					line-height: 36rpx;
					letter-spacing: 3rpx;
					color: #ffffff;
				}
			}
		}

		.line-content {
			width: 100%;
			height: 23rpx;
			background-color: #fff;
			border-radius: 5rpx;
		}

		.search-result {

			.tab-cart {
				padding: 0 18rpx 0 18rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 106rpx;
				background-color: #f5f5f5;
				border-radius: 5rpx;
				box-sizing: border-box;

				.cart-item {
					display: flex;
					align-items: center;

					.title {
						font-size: 30rpx;
						letter-spacing: 3rpx;
						color: #787878;
						margin-right: 12rpx;
					}

					.color {
						color: #333333;
					}

					.img {
						width: 25rpx;
						height: 12rpx;
					}
				}
			}

			.result {
				// margin-top: 52rpx;
				background-color: #fff;
				padding: 20rpx 18rpx 0;
			}

			.result_ {
				// margin-top: 87rpx;
				background-color: #ffffff;
				padding: 50rpx 18rpx 40rpx 18rpx;
				box-sizing: border-box;
				.item-size {
					.size-title {
						font-size: 26rpx;
						font-weight: bold;
						font-stretch: normal;
						line-height: 72rpx;
						letter-spacing: 3rpx;
						color: #363636;
					}

					.options {
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						.opt-item {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 153rpx;
							height: 60rpx;
							border-radius: 30rpx;
							border: solid 2rpx #d2d2d2;
							font-size: 24rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 72rpx;
							letter-spacing: 2rpx;
							color: #787878;
							margin: 0 30rpx 30rpx 0;

							&.active {
								background-color: #c60122;
								color: #ffffff;
								border: solid 2rpx #c60122;
							}
						}

						.opt-item:nth-child(4n) {
							margin-right: 0;
						}

					}

					.options__ {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.line {
							width: 132rpx;
							height: 1rpx;
							background-color: #e5e5e5;
						}

						.lowest,
						.highest {
							width: 252rpx;
							height: 60rpx;
							border-radius: 30rpx;
							border: solid 2rpx #d2d2d2;
							display: flex;
							align-items: center;
							justify-content: center;

							.ipt {
								text-align: center;
								font-size: 24rpx;
								color: #333;
							}

							.ipt-in {
								font-size: 24rpx;
								line-height: 72rpx;
								letter-spacing: 2rpx;
								color: #989898;
							}
						}

					}

					.reset-confirm {
						display: flex;
						align-items: center;
						justify-content: space-around;
						margin-top: 140rpx;
					}

					.reset {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 230rpx;
						height: 60rpx;
						border-radius: 30rpx;
						border: solid 2rpx #a0a0a0;
						font-size: 28rpx;
						letter-spacing: 3rpx;
						color: #545454;
					}

					.confirm {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 230rpx;
						height: 60rpx;
						background-color: #c60122;
						border-radius: 30rpx;
						font-size: 28rpx;
						letter-spacing: 3rpx;
						color: #ffffff;
					}
				}
			}
		}

		.menu-search {
			margin-top: 103rpx;
			margin: 103rpx 20rpx 0 18rpx;
			.one {
				margin-bottom: 80rpx;

				.title_ {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						font-size: 26rpx;
						line-height: 72rpx;
						letter-spacing: 3rpx;
						color: #333333;
					}

					.right {
						font-size: 24rpx;
						line-height: 72rpx;
						letter-spacing: 2rpx;
						color: #989898;
					}
				}

				.history {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex-wrap: wrap;

					.item {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 15rpx 24rpx;
						font-size: 24rpx;
						letter-spacing: 2rpx;
						color: #333333;
						margin-right: 30rpx;
					}
				}
			}
		}
	}
</style>
